<template>
  <div class="login">
    <!-- 顶部返回 -->
    <div class="login-top">
      <van-nav-bar
        title="登录"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!-- 登录 -->
    <div class="login-main">
      <h1 class="login-title">欢迎登录!</h1>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="loginData.phone"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="loginData.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
      <div class="user-agreement">
        <input type="checkbox" checked />
        <p>
          我已阅读并同意 <a href="#">《用户协议》</a
          ><a href="#">《隐私政策》</a
          >，并授权我公司使用该账号信息(如昵称、头像、收货地址)进行统一管理
        </p>
      </div>
    </div>
    <div class="login-bottom">
      <router-link to="/register">没有账号？去注册</router-link>
    </div>
    <!-- 弹窗 -->
    <van-dialog v-model:show="show" :title="diaTitle" @confirm="diaHandler">
    </van-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {userLoginApi,getUserAddApi,hotShopApi} from '@/server'
import { useRouter } from 'vue-router';
import userStore from '@/stores/user';
import goodsStore from '@/stores/good';
import useCartStore from '@/stores/cart'
const cartStore=useCartStore()
const goodStore=goodsStore()
const router=useRouter()
const useStore=userStore()
// 顶部返回
const onClickLeft = () => history.back();
// 表单数据
const loginData=ref({
  phone:'',
  password:''
})
// 弹窗开关
const show = ref(false);
// 弹窗标题
const diaTitle=ref()
// 表单函数
const onSubmit =async (values) => {
  // 登录请求
  let res=await userLoginApi(loginData.value)
  if(res.status===200){
    // 3 秒后自动关闭
    // 成功通知
    show.value=true
    diaTitle.value='登录成功！'
    useStore.SET_TOKEN(res.data.result.token)
    useStore.SET_USERINFO(res.data.result)
    // 储存分类商品
    goodStore.getGoods({project_id:1,limit:1000})
    // 储存默认地址
    let address=await getUserAddApi()
    address.data.result.forEach(ele=>{
      if(ele.default_set==='1'){
        localStorage.setItem('defAddress',JSON.stringify(ele))
      }
    })
    // 获取购物车
    cartStore.getCart()
    // 获取热门商品
    // let hotList=ref([])
    // let data=await hotShopApi({project_id:'1'})
    // hotList.value=data.data.result.rows
    // localStorage.setItem('hotList',JSON.stringify(hotList.value))
  }
};
// 确认弹窗跳转
const diaHandler=()=>{
  // 跳转登录
  router.push('/my')
}
</script>

<style lang="scss">
.login {
  width: 100vw;
  .login-main {
    margin: 0 auto;
    width: 96vw;
    height: 66.6667vw;
    .login-title {
      margin: 8vw 8vw;
    }
    .user-agreement {
      display: flex;
      input {
        margin-right: 2.1333vw;
      }
      p {
        font-size: 3.2vw;
      }
    }
  }
  .login-bottom {
    a{
      display: inline-block;
      width: 34.6667vw;
      height: 4.5333vw;
      margin-left: 61.8667vw;
    }
  }
}
</style>
